<template>
    <div
        class="page_root"
        :key="queryUpdateFlag"
        data-page-name="定价沙盘（市）"
        data-page-identification="j_4mk7t3lps5"
    >
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_69g89s27l7 自定义模板_e1f1p9bxyy -->
            <div id="MapContainer"></div>
            <div class="header">
                <div class="left flex items-center">
                    <a-tree-select
                        v-model:value="area"
                        show-search
                        allow-clear
                        tree-default-expand-all
                        :tree-data="treeData"
                        :fieldNames="{ children: 'districts', label: 'name', value: 'adcode' }"
                        @select="handleAreaSelected"
                        tree-node-filter-prop="name"
                        :dropdownMatchSelectWidth="220"
                        dropdownClassName="area-select-container"
                        class="area-select"
                    />
                    <div class="current-area">
                        <template v-for="(item, index) in areaShowTile" :key="index">
                            <span v-if="index !== 0"> > </span>
                            <span :class="{ current: index === areaShowTile.length - 1 }">{{ item }}</span>
                        </template>
                    </div>
                    <ul class="bar-legend">
                        <li class="bar-legend-item">
                            <i class="legend-icon purple"></i>区域需求<span class="unit">(万吨)</span>
                        </li>
                        <li class="bar-legend-item">
                            <i class="legend-icon blue"></i>熟料库存<span class="unit">(万吨)</span>
                        </li>
                    </ul>
                </div>
                <div class="right flex items-center">
                    <a-radio-group v-model:value="plan" class="plan-config-area">
                        <a-radio :value="1">市占率最优</a-radio>
                        <a-radio :value="2">利润最优</a-radio>
                        <a-radio :value="3">利润最优(市占率不变)</a-radio>
                        <a-radio :value="4">市占率最优(利润不变)</a-radio>
                    </a-radio-group>
                    <a-button type="primary" size="small" class="save-btn"
                        ><save-filled class="icon" />保存方案</a-button
                    >
                </div>
            </div>
            <div class="board">
                <div class="card model-card">
                    <h5 class="title-content">
                        <span class="text"
                            ><img
                                src="http://10.40.0.33:9001/file-storage/463470999937916928-source.png"
                                class="icon"
                            />模型数据</span
                        >
                        <a-button type="primary" ghost class="btn-style"
                            ><img
                                src="http://10.40.0.33:9001/file-storage/463471011046531072-source.png"
                                class="icon"
                            />模拟优化</a-button
                        >
                    </h5>
                    <div class="card-content">
                        <h5 class="title">区域信息</h5>
                        <ul class="model-list">
                            <li v-for="(item, index) in areaList" :key="index">
                                <div class="main-content">
                                    <p class="title">{{ item.title }}</p>
                                    <p class="value-content">
                                        <span class="value">{{ item.value }}</span
                                        ><span class="unit">{{ item.unit }}</span>
                                    </p>
                                </div>
                                <img
                                    src="http://10.40.0.33:9001/file-storage/463471043957137408-source.png"
                                    class="background"
                                />
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card">
                    <h5 class="title-content">
                        <span class="text"
                            ><img
                                src="http://10.40.0.33:9001/file-storage/463471021884612608-source.png"
                                class="icon"
                            />模型数据</span
                        >
                        <a-button type="primary" ghost class="btn-style"
                            ><img
                                src="http://10.40.0.33:9001/file-storage/463471021884612608-source.png"
                                class="icon"
                            />模拟优化</a-button
                        >
                    </h5>
                    <div class="card-content">
                        <h5 class="title">2024年8月份运费-v1.0</h5>
                        <a-table
                            :columns="freightInfoColumns"
                            :data-source="freightInfoData"
                            class="freight-table"
                            :scroll="{ y: 360 }"
                        />
                    </div>
                </div>
            </div>
            <div class="footer">
                <h5 class="title-content">
                    <span class="text"
                        ><img
                            src="http://10.40.0.33:9001/file-storage/463471033442017280-source.png"
                            class="icon"
                        />核心指标</span
                    >
                </h5>
                <div class="summary">
                    <ul class="summary-list">
                        <li v-for="(item, index) in summaryContent" :key="index" class="summary-list-item">
                            <span class="title">{{ item.title }}</span>
                            <span class="value">{{ item.value }}</span>
                            <span class="unit">{{ item.unit }}</span>
                        </li>
                    </ul>
                    <div class="filter-area">
                        <div class="filter-item">
                            区县名称：<a-tree-select
                                v-model:value="filter.area"
                                show-search
                                allow-clear
                                tree-default-expand-all
                                :tree-data="treeData"
                                :fieldNames="{ children: 'districts', label: 'name', value: 'adcode' }"
                                tree-node-filter-prop="name"
                                class="filter-select"
                            />
                        </div>
                        <div class="filter-item">
                            集团：<a-select
                                show-search
                                v-model:value="filter.clique"
                                :options="cliqueOptions"
                                :filter-option="filterOption"
                                class="filter-select"
                            />
                        </div>
                        <div class="filter-item">
                            企业名称：<a-select
                                show-search
                                v-model:value="filter.company"
                                :options="companyOptions"
                                :filter-option="filterOption"
                                class="filter-select"
                            />
                        </div>
                        <a-button class="btn-style" type="primary" ghost><folder-open-outlined />导出Excel</a-button>
                    </div>
                </div>
                <a-table
                    bordered
                    :columns="mainColumns"
                    :data-source="mainData"
                    class="main-table"
                    :scroll="{ y: 420 }"
                />
            </div>
            <!-- end vid_69g89s27l7 自定义模板_e1f1p9bxyy -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'

    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'

    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    // 顶部操作区
    const treeData = ref([])
    get('http://10.40.0.33:9001/file-storage/463304091817123840-source.json').then(res => {
        try {
            treeData.value = [
                {
                    adcode: '0',
                    name: '全部区域',
                    districts: res
                }
            ]
        } catch (error) {
            console.log('error :', error)
        }
        // console.log(res);
    })
    const area = ref('0')
    const areaShowTile = computed(() => {
        const result = ['中国']
        if (area.value !== '0') {
            const [areaInfo] = treeData.value
            const province = area.value.slice(0, 2)
            const city = area.value.slice(2, 4)
            console.log('city :', city)
            const provinceCode = province + '0000'
            const provinceInfo = areaInfo.districts.find(item => item.adcode === provinceCode)
            console.log('provinceInfo :', provinceInfo)
            result.push(provinceInfo.name)
            // 包括城市
            if (city !== '00') {
                // const cityCode = province + city + "00";
                // console.log("cityCode :", cityCode);
                const cityInfo = provinceInfo.districts.find(item => item.adcode === area.value)
                result.push(cityInfo.name)
            }
        }
        return result
    })
    const plan = ref(1)
    const handleAreaSelected = () => {}

    const areaList = ref([
        {
            title: '市场预估需求量',
            value: '15.20',
            unit: '万吨'
        },
        {
            title: '当前库存总量',
            value: '360.00',
            unit: '万吨'
        },
        {
            title: '当前平均到位价',
            value: '360.00',
            unit: '元/吨'
        }
    ])

    const freightInfoColumns = [
        {
            title: '集团',
            dataIndex: 'clique',
            key: 'clique',
            align: 'center'
        },
        {
            title: '起点位置',
            dataIndex: 'start',
            key: 'start',
            align: 'left',
            width: 200
        },
        {
            title: '终点\n位置',
            dataIndex: 'end',
            key: 'end',
            align: 'center'
        },
        {
            title: '运价\n(元/吨)',
            dataIndex: 'freight',
            key: 'freight',
            align: 'center'
        },

        {
            title: '运距(km)',
            dataIndex: 'distance',
            key: 'distance',
            align: 'center'
        },
        {
            title: '运输\n方式',
            dataIndex: 'shippingMethod',
            key: 'shippingMethod',
            align: 'center'
        }
    ]
    const freightInfoData = ref([
        {
            clique: '北方',
            start: '伊春北方水泥有限公司',
            end: '永吉',
            freight: '121',
            distance: '80',
            shippingMethod: '汽运'
        },
        {
            clique: '北方',
            start: '黑河关鸟河水泥有限责任公司',
            end: '伊通',
            freight: '75',
            distance: '82',
            shippingMethod: '汽运'
        },
        {
            clique: '北方',
            start: '汪清北方水泥有限公司',
            end: '农安',
            freight: '107',
            distance: '68',
            shippingMethod: '汽运'
        },
        {
            clique: '北方',
            start: '白山北方水泥有限公司',
            end: '舒兰',
            freight: '91',
            distance: '89',
            shippingMethod: '汽运'
        },
        {
            clique: '北方',
            start: '佳木斯北方水泥有限公司',
            end: '桦甸',
            freight: '87',
            distance: '68',
            shippingMethod: '汽运'
        },
        {
            clique: '北方',
            start: '牡丹江北方水泥有限公司',
            end: '磐石',
            freight: '86',
            distance: '75',
            shippingMethod: '汽运'
        },
        {
            clique: '北方',
            start: '铁岭北方水泥有限公司',
            end: '双阳',
            freight: '70',
            distance: '78',
            shippingMethod: '汽运'
        }
    ])

    const summaryContent = ref([
        {
            title: '当前预估月总利润：',
            value: '459.24',
            unit: '万元'
        },
        {
            title: '最优月总利润：',
            value: '--',
            unit: '万元'
        },
        {
            title: '最优月总利润：',
            value: '--',
            unit: '万元'
        }
    ])

    const cliqueOptions = ref([
        { value: 'north', label: '北方集团' },
        { value: 'other', label: '其他' }
    ])

    const companyOptions = ref([
        { value: 1, label: '长春市四通水泥有限公司' },
        { value: 2, label: '农安北方水泥有限公司' },
        { value: 3, label: '吉林亚泰鼎鹿水泥有限公司' },
        { value: 4, label: '长春市新兴水泥厂' },
        { value: 5, label: '吉林亚泰水泥有限公司' },
        { value: 6, label: '亚泰集团伊通水泥有限公司' },
        { value: 7, label: '四平佳润水泥有限公司' },
        { value: 8, label: '双辽天茂水泥厂' },
        { value: 9, label: '金隅冀东水泥有限公司四平分公司' },
        { value: 10, label: '辽宁新创集团水泥有限公司' }
    ])

    const filter = reactive({
        area: '0',
        clique: 'north',
        company: 1
    })

    const filterOption = (input, option) => {
        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }

    const mainColumns = [
        {
            title: '序号',
            dataIndex: 'order',
            key: 'order',
            align: 'center'
        },
        {
            title: '区县名称',
            dataIndex: 'countyName',
            key: 'countyName',
            align: 'center'
        },
        {
            title: '集团',
            dataIndex: 'clique',
            key: 'clique',
            align: 'center'
        },
        {
            title: '企业名称',
            dataIndex: 'companyName',
            key: 'companyName',
            align: 'center',
            width: 240
        },
        {
            title: '销量（万吨）',
            children: [
                {
                    title: '当前预测',
                    dataIndex: 'saleCurrentEstimate',
                    key: 'saleCurrentEstimate',
                    align: 'center'
                },
                {
                    title: '最优',
                    dataIndex: 'saleBest',
                    key: 'saleBest',
                    align: 'center'
                },
                {
                    title: '模拟',
                    dataIndex: 'saleEstimate',
                    key: 'saleEstimate',
                    align: 'center'
                }
            ]
        },
        {
            title: '到位价（万吨）',
            children: [
                {
                    title: '当前预测',
                    dataIndex: 'arrivalCurrentEstimate',
                    key: 'arrivalCurrentEstimate',
                    align: 'center'
                },
                {
                    title: '最优',
                    dataIndex: 'arrivalBest',
                    key: 'arrivalBest',
                    align: 'center'
                },
                {
                    title: '模拟',
                    dataIndex: 'arrivalEstimate',
                    key: 'arrivalEstimate',
                    align: 'center'
                }
            ]
        },
        {
            title: '利润（万）',
            children: [
                {
                    title: '当前预测',
                    dataIndex: 'profitCurrentEstimate',
                    key: 'profitCurrentEstimate',
                    align: 'center'
                },
                {
                    title: '最优',
                    dataIndex: 'profitBest',
                    key: 'profitBest',
                    align: 'center'
                },
                {
                    title: '模拟',
                    dataIndex: 'profitEstimate',
                    key: 'profitEstimate',
                    align: 'center'
                }
            ]
        }
    ]
    const mainData = ref([
        {
            order: 1,
            countyName: '市区',
            clique: '北方',
            companyName: '长春市四通水泥有限公司',
            saleCurrentEstimate: '1.5',
            saleBest: '1.5',
            saleEstimate: '1.5',
            arrivalCurrentEstimate: '1.5',
            arrivalBest: '1.5',
            arrivalEstimate: '1.5',
            profitCurrentEstimate: '1.5',
            profitBest: '1.5',
            profitEstimate: '1.5'
        },
        {
            order: 2,
            countyName: '市区',
            clique: '北方',
            companyName: '农安北方水泥有限公司',
            saleCurrentEstimate: '2.3',
            saleBest: '2.3',
            saleEstimate: '2.3',
            arrivalCurrentEstimate: '2.3',
            arrivalBest: '2.3',
            arrivalEstimate: '2.3',
            profitCurrentEstimate: '2.3',
            profitBest: '2.3',
            profitEstimate: '2.3'
        },
        {
            order: 3,
            countyName: '市区',
            clique: '冀东',
            companyName: '吉林亚泰鼎鹿水泥有限公司',
            saleCurrentEstimate: '1.6',
            saleBest: '1.6',
            saleEstimate: '1.6',
            arrivalCurrentEstimate: '1.6',
            arrivalBest: '1.6',
            arrivalEstimate: '1.6',
            profitCurrentEstimate: '1.6',
            profitBest: '1.6',
            profitEstimate: '1.6'
        },
        {
            order: 4,
            countyName: '市区',
            clique: '冀东',
            companyName: '长春市新兴水泥厂',
            saleCurrentEstimate: '1.9',
            saleBest: '1.9',
            saleEstimate: '1.9',
            arrivalCurrentEstimate: '1.9',
            arrivalBest: '1.9',
            arrivalEstimate: '1.9',
            profitCurrentEstimate: '1.9',
            profitBest: '1.9',
            profitEstimate: '1.9'
        },
        {
            order: 5,
            countyName: '市区',
            clique: '冀东',
            companyName: '吉林亚泰水泥有限公司',
            saleCurrentEstimate: '2.8',
            saleBest: '2.8',
            saleEstimate: '2.8',
            arrivalCurrentEstimate: '2.8',
            arrivalBest: '2.8',
            arrivalEstimate: '2.8',
            profitCurrentEstimate: '2.8',
            profitBest: '2.8',
            profitEstimate: '2.8'
        },
        {
            order: 6,
            countyName: '市区',
            clique: '亚泰',
            companyName: '亚泰集团伊通水泥有限公司',
            saleCurrentEstimate: '12.5',
            saleBest: '12.5',
            saleEstimate: '12.5',
            arrivalCurrentEstimate: '12.5',
            arrivalBest: '12.5',
            arrivalEstimate: '12.5',
            profitCurrentEstimate: 12.5,
            profitBest: '12.5',
            profitEstimate: 12.5
        },
        {
            order: 7,
            countyName: '市区',
            clique: '亚泰',
            companyName: '四平佳润水泥有限公司',
            saleCurrentEstimate: '10.2',
            saleBest: '10.2',
            saleEstimate: '10.2',
            arrivalCurrentEstimate: '10.2',
            arrivalBest: '10.2',
            arrivalEstimate: '10.2',
            profitCurrentEstimate: 10.2,
            profitBest: '10.2',
            profitEstimate: 10.2
        },
        {
            order: 8,
            countyName: '市区',
            clique: '亚泰',
            companyName: '双辽天茂水泥厂',
            saleCurrentEstimate: '4.6',
            saleBest: '4.6',
            saleEstimate: '4.6',
            arrivalCurrentEstimate: '4.6',
            arrivalBest: '4.6',
            arrivalEstimate: '4.6',
            profitCurrentEstimate: '4.6',
            profitBest: '4.6',
            profitEstimate: '4.6'
        },
        {
            order: 9,
            countyName: '市区',
            clique: '其他',
            companyName: '金隅冀东水泥有限公司四平分公司',
            saleCurrentEstimate: '5.5',
            saleBest: '5.5',
            saleEstimate: '5.5',
            arrivalCurrentEstimate: '5.5',
            arrivalBest: '5.5',
            arrivalEstimate: '5.5',
            profitCurrentEstimate: '5.5',
            profitBest: '5.5',
            profitEstimate: '5.5'
        },
        {
            order: 10,
            countyName: '市区',
            clique: '其他',
            companyName: '辽宁新创集团水泥有限公司',
            saleCurrentEstimate: '8.6',
            saleBest: '8.6',
            saleEstimate: '8.6',
            arrivalCurrentEstimate: '8.6',
            arrivalBest: '8.6',
            arrivalEstimate: '8.6',
            profitCurrentEstimate: '8.6',
            profitBest: '8.6',
            profitEstimate: '8.6'
        }
    ])

    // 绘制地图
    // 显示柱子，去掉marker
    import AMapLoader from '@amap/amap-jsapi-loader'

    const markerPng = 'http://10.40.0.33:9001/file-storage/463538766877728768-source.png'

    let map = null
    const renderMap = async () => {
        const locationData = await get('http://10.40.0.33:9001/file-storage/463538652597624832-source.json')
        const city = await get('http://10.40.0.33:9001/file-storage/463538588126978048-source.json')

        var loca = null
        let AMap = null

        let areaNames = new Set()
        let markerMap = {}
        let allMarkerList = []
        locationData.forEach(item => {
            areaNames.add(item[0])
        })
        areaNames.forEach(areaName => {
            markerMap[areaName] = []
        })

        let wallLayer = null
        const renderWallLayer = areas => {
            // let provinces = getProvinces(areas);
            let data = []
            city.forEach(item => {
                data = data.concat(
                    item.features.map(item => {
                        return item
                    })
                )
            })
            let geo = new Loca.GeoJSONSource({
                data: {
                    type: 'FeatureCollection',
                    features: data
                }
            })

            if (wallLayer === null) {
                wallLayer = new Loca.PolygonLayer({
                    loca,
                    zIndex: 11,
                    opacity: 0.99,
                    // cullface: 'none',
                    shininess: 10,
                    hasSide: true
                })
            }
            let labelLayer = wallLayer.getLabelsLayer()
            if (labelLayer) {
                map.remove(labelLayer)
            }
            wallLayer.setSource(geo)

            const colorMap = ['#ff83a5', '#ffd3d3', '#fca3b6', '#ffbebe', '#fd92ad', '#ff5d89', '#fca3b6']

            wallLayer.setStyle({
                topColor: function (index, feature) {
                    return colorMap[index % 7]
                    // return "#ff83a5";
                    // return feature.properties.color;
                },
                sideTopColor: function (index, feature) {
                    return '#ff5d89'
                    // return feature.properties.border;
                },
                sideBottomColor: function (index, feature) {
                    return '#fa98ae'
                    // return feature.properties.border;
                },
                height: function (index, feature) {
                    return 10000
                    // return 20000 + (35 - index) * 100;
                },
                altitude: 0,
                label: function (index, feature) {
                    // 后续定制区域名称
                    return {
                        visible: false
                        // text: {
                        //     content: feature.properties.name,
                        //     style: {
                        //         fillColor: "#8C8C8C",
                        //     },
                        // },
                    }
                }
            })
        }

        const renderBoundary = areas => {
            // let data = [];
            city.forEach(item => {
                item.features.forEach(item => {
                    let polyphy = new AMap.Polygon({
                        strokeWeight: 2,
                        strokeColor: '#FFF',
                        path: item.geometry.coordinates,
                        fillOpacity: 1, //
                        // height: 10000,
                        // roofColor: "#FF83A5",
                        // wallColor: "#ff5d89",
                        // extrusionHeight: 10000,
                        // roofColor: roofColor,
                        // wallColor: wallColor,
                        //bubble: true,
                        //draggable: true,
                        zIndex: 12,
                        extData: item
                    })

                    polyphy.on('click', event => {
                        console.log('event :', event)
                    })
                    map.add(polyphy)
                })
            })
        }

        let markerOverlayer = null

        const renderMarkers = area => {
            const icon = new AMap.Icon({
                size: new AMap.Size(24, 24), //图标尺寸
                image: markerPng, //Icon 的图像
                imageSize: new AMap.Size(24, 24)
            })
            // 渲染水泥厂，如果给定了区域，获取区域
            // 绘制水泥厂图表
            locationData.forEach(item => {
                const content = `<div class="custom-content-marker">
                  <img src=${markerPng} class="icon">
                  <span>${item[1]}</span>
              </div>`
                // 构建marker
                let marker = new AMap.Marker({
                    position: [item[2], item[3], 20000],
                    title: item[1],
                    icon: icon,
                    content,
                    anchor: 'bottom-center',
                    extData: {
                        position: [item[2], item[3], 20000],
                        title: item[1],
                        type: 'mill'
                    }
                })
                marker.on('click', function (e) {
                    console.log('你点击了Marker', e)
                    // alert("你点击了Marker", e);
                })
                allMarkerList.push(marker)
                markerMap[item[0]].push(marker)
            })

            markerOverlayer = new AMap.OverlayGroup(allMarkerList)
            markerOverlayer.show() //覆盖物可见
            map.add(markerOverlayer)
            map.setFitView([...allMarkerList], null)
        }

        let barLayer = null
        let barMarker = []
        const renderTwoBarLayer = () => {
            barLayer = new Loca.PrismLayer({
                zIndex: 11,
                opacity: 0.8,
                visible: false,
                hasSide: true
            })

            let markers = map.getAllOverlays('marker').filter(item => {
                let extData = item.getExtData()
                if (extData) {
                    return extData.type === 'mill'
                }
                return false
            })
            let geoData = [
                ...markers.map(item => {
                    let position = item.getPosition()
                    let extData = item.getExtData()
                    return {
                        type: 'Feature',
                        geometry: {
                            type: 'Point',
                            coordinates: [position.getLng(), position.getLat()]
                        },
                        properties: {
                            名称: extData.title,
                            height: Math.random() * 15000,
                            color: '#E97091'
                        }
                    }
                }),
                ...markers.map(item => {
                    let position = item.getPosition()
                    let extData = item.getExtData()
                    return {
                        type: 'Feature',
                        geometry: {
                            type: 'Point',
                            coordinates: [position.getLng() + 0.125, position.getLat()]
                        },
                        properties: {
                            名称: extData.title,
                            height: Math.random() * 15000,
                            color: '#2852F1'
                        }
                    }
                })
            ]

            var geo = new Loca.GeoJSONSource({
                data: {
                    type: 'FeatureCollection',
                    features: geoData
                }
            })
            barLayer.setSource(geo)

            barLayer.setStyle({
                unit: 'meter',
                sideNumber: 4,
                topColor: (index, f) => {
                    var n = f.properties['height']
                    var c = f.properties['color']
                    // if (c) {
                    //     return c;
                    // }
                    // return "#E97091";
                    return '#F59DA7'
                    // return n > 7000 ? "#E97091" : "#2852F1";
                },
                sideTopColor: (index, f) => {
                    var n = f.properties['height']
                    var c = f.properties['color']
                    // if (c) {
                    //     return c;
                    // }
                    return '#F59DA7'
                    // return n > 7000 ? "#F59DA7" : "#2852F1";
                    // return n > 7000 ? "#E97091" : "#2852F1";
                },
                sideBottomColor: (index, f) => {
                    var n = f.properties['height']
                    var c = f.properties['color']
                    // if (c) {
                    //     return c;
                    // }
                    return '#793EEB'
                    // return n > 7000 ? "#E97091" : "#2852F1";
                },
                radius: 7500,
                height: (index, f) => {
                    var props = f.properties
                    // var height = Math.max(100, Math.sqrt(props["height"]) * 9000 - 50000);
                    var height = props['height'] * 4
                    let marker = new AMap.Marker({
                        anchor: 'bottom-center',
                        position: [f.coordinates[0], f.coordinates[1], height],
                        content:
                            '<div style="color:#FFF;width: 4em;text-align: center;font-size: 12px;">' +
                            parseFloat(props['height']).toFixed(0) +
                            '</div>'
                    })
                    barMarker.push(marker)
                    map.add(marker)
                    return height
                },
                rotation: 360,
                altitude: 10000
            })
            loca.add(barLayer)

            setTimeout(function () {
                barLayer.show()
                // barLayer.addAnimate({
                //     key: "height",
                //     value: [0, 1],
                //     duration: 500,
                //     easing: "Linear",
                //     transform: 2000,
                //     random: true,
                //     delay: 8000,
                // });
                // barLayer.addAnimate({
                //     key: "rotation",
                //     value: [0, 1],
                //     duration: 500,
                //     easing: "Linear",
                //     transform: 2000,
                //     random: true,
                //     delay: 8000,
                // });
            }, 200)
            loca.animate.start()
        }

        const reverseGeocode = lnglat => {
            return new Promise((resolve, reject) => {
                var geocoder = new AMap.Geocoder({
                    radius: 1000,
                    extensions: 'all'
                })

                geocoder.getAddress(lnglat, function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        // const { regeocode } = result;
                        // console.log("result :", regeocode);
                        resolve(result.regeocode)
                        // res = regeocode;
                        // if (result && result.geocodes.length) {
                        //     var geocode = result.geocodes[0];
                        //     console.log("市:", geocode.addressComponent.city);
                        //     // 你还可以获取更多信息，如区县（district）、街道（street）等
                        // }
                    } else {
                        console.error('获取地址失败', result)
                        reject(false)
                    }
                })
            })
        }

        window._AMapSecurityConfig = {
            securityJsCode: '37a7e520e06bc202ff267a6a0e492d13'
        }
        AMapLoader.load({
            key: '09b7ca63fd0a1ac64f96409c63347962', // 申请好的Web端开发者Key，首次调用 load 时必填
            version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ['Map3D', 'AMap.DistrictSearch', 'AMap.Geocoder'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
            Loca: {
                // 是否加载 Loca， 缺省不加载
                version: '2.0.0' // Loca 版本，缺省 1.3.2
            }
        })
            .then(AMapInstancec => {
                AMap = AMapInstancec
                map = new AMap.Map('MapContainer', {
                    mapStyle: 'amap://styles/whitesmoke',
                    viewMode: '3D',
                    pitch: 60,
                    zoom: 6.6,
                    center: [126.173379, 44.929945]
                })
                map.on('zoomend', () => {
                    console.log('map zoomed', map.getZoom())
                })
                map.on('moveend', () => {
                    console.log('map moveend', map.getZoom(), map.getCenter())
                })
                map.on('click', async e => {
                    const { lnglat } = e
                    const result = await reverseGeocode(lnglat)
                })
                loca = window.loca = new Loca.Container({
                    map
                })
                // loca.ambLight = {
                //     intensity: 0.7,
                //     color: '#FFFFFF',
                // };
                // loca.dirLight = {
                //     intensity: 0.8,
                //     color: '#fff',
                //     target: [0, 0, 0],
                //     position: [0, -1, 1],
                // };
                // loca.pointLight = {
                //     color: '#FFFFFF',
                //     position: [112.028276, 31.58538, 2000000],
                //     intensity: 3,
                //     // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
                //     distance: 5000000,
                // };

                map.getLayers()
                    .filter(item => {
                        return item.CLASS_NAME === 'AMap.SkyLayer'
                    })
                    .forEach(layer => {
                        layer.hide()
                    })
                renderWallLayer()
                renderMarkers()
                renderTwoBarLayer()
                // renderBoundary();
                // renderLineLayer();
                // renderBarLayer();
                map.setFitView()
                map.setZoom(6.6)
                // map.setCenter()
                map.panTo([126.173379, 44.929945])
            })
            .catch(e => {
                console.log(e)
            })
    }

    onMounted(() => {
        renderMap()
    })

    onUnmounted(() => {
        map?.destroy()
    })
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }

    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }

    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }

    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }

    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }

    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }

    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }

    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    .page_root {
        position: relative;
    }
    #MapContainer {
        width: 100%;
        height: 1480px;
        flex: 1;
        background-color: transparent !important;
        background-image: none !important;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: top 1000ms ease;
    }
    .header {
        position: absolute;
        top: 16px;
        left: 24px;
        z-index: 200;
        width: calc(100% - 48px);
        display: flex;
        justify-content: space-between;

        .left {
            display: flex;
            align-items: center;
            .area-select {
                width: 180px;
            }
            .current-area {
                background: #ffffff;
                box-shadow: 2px 2px 16px 0px rgba(234, 233, 235, 1);
                border-radius: 4px;
                color: #595959;
                padding: 4px 16px;
                margin-left: 24px;
                min-width: 160px;
                .current {
                    color: #262626;
                    font-weight: bold;
                }
            }
            .bar-legend {
                display: flex;
                align-items: center;
                padding: 0;
                margin: 0 0 0 8px;
                font-size: 14px;
                color: #2e2e3a;
                font-weight: bold;
                &-item {
                    display: flex;
                    align-items: center;
                    margin-left: 16px;
                    .unit {
                        color: #8c8c8c;
                        font-weight: 600;
                    }
                }
                .legend-icon {
                    display: block;
                    width: 12px;
                    height: 12px;
                    border: 1px solid rgba(255, 255, 255, 1);
                    box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 1);
                    margin-right: 8px;
                    &.purple {
                        background-image: linear-gradient(180deg, #f59da7 0%, #793eeb 100%);
                    }
                    &.blue {
                        background-image: linear-gradient(180deg, #3980e2 0%, #20bde3 100%);
                    }
                }
            }
        }
        .right {
            display: flex;
            align-items: center;
            .save-btn {
                border-radius: 8px;
            }
        }
    }
    .board {
        position: absolute;
        top: 48px;
        left: 24px;
        z-index: 200;
        width: 545px;
        .card {
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid #fff;
            box-shadow: 0px 0px 20px 0px rgba(245, 218, 218, 1);
            border-radius: 8px;
            margin-top: 16px;
            .title-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 24px;
                color: #2e2e3a;
                font-size: 18px;
                font-weight: 500;
                border-bottom: 1px solid #d9d9d9;
                margin: 0;
                .text {
                    display: flex;
                    align-items: center;
                    .icon {
                        width: 18px;
                        height: 18px;
                        margin-right: 6px;
                    }
                }
                .btn-style {
                    display: flex;
                    align-items: center;
                    border-radius: 8px;
                    .icon {
                        width: 16px;
                        height: 16px;
                        margin-right: 6px;
                    }
                }
            }
            .card-content {
                padding: 16px 24px;
                & > .title {
                    font-size: 16px;
                    color: #d7000f;
                    font-weight: 500;
                }
                .model-list {
                    display: flex;
                    flex-wrap: wrap;
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    & > li {
                        width: 33.33%;
                        position: relative;
                        height: 110px;

                        .main-content {
                            position: absolute;
                            width: 100%;
                            text-align: center;
                            z-index: 11;
                            color: #262626;
                            padding-top: 14px;
                            p {
                                margin: 0;
                                &.title-content {
                                    font-size: 12px;
                                    font-weight: 400;
                                }
                                &.value-content {
                                    margin-top: 4px;
                                    font-size: 20px;
                                    line-height: 20px;
                                    font-weight: 700;
                                    .unit {
                                        font-size: 14px;
                                        color: #8c8c8c;
                                        font-weight: normal;
                                        margin-left: 4px;
                                    }
                                }
                            }
                        }

                        .background {
                            position: absolute;
                            width: 88%;
                            left: 6%;
                            bottom: 0;
                        }
                    }
                }
            }
            :deep(.freight-table) {
                .@{ant-prefix}-table-tbody > tr > td {
                    padding: 4px;
                }
                .@{ant-prefix}-table-thead > tr > th {
                    padding: 16px 6px;
                }
            }
        }
    }
    .footer {
        position: absolute;
        top: 960px;
        left: 24px;
        z-index: 200;
        width: calc(100% - 48px);
        background: rgba(255, 255, 255, 0.9);
        border: 2px solid #fff;
        box-shadow: 0px 0px 20px 0px rgba(245, 218, 218, 1);
        border-radius: 8px;
        .title-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 24px;
            color: #2e2e3a;
            font-size: 18px;
            font-weight: 500;
            margin: 0;
            .text {
                display: flex;
                align-items: center;
                .icon {
                    width: 18px;
                    height: 18px;
                    margin-right: 6px;
                }
            }
        }
        .summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px;
            .summary-list {
                list-style: none;
                display: flex;
                padding: 0;
                margin: 0;
                color: #2e2e3a;
                &-item {
                    margin-left: 40px;
                    &:first-child {
                        margin-left: 0;
                    }
                }
                .value {
                    font-size: 20px;
                    color: #2e2e3a;
                    font-weight: 700;
                }
                .unit {
                    color: #8c8c8c;
                    margin-left: 4px;
                }
            }
            .filter-area {
                display: flex;
                .filter-item {
                    margin-left: 24px;
                    .filter-select {
                        width: 220px;
                    }
                }
                .btn-style {
                    margin-left: 24px;
                    border-radius: 8px;
                }
            }
        }
        .main-table {
            margin: 16px 24px;
        }
    }
</style>
